<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #myCanvas {
      width: 500px;
      height: 500px;
      border: #ccc 1px solid;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas"></canvas>
  <script>
    var canvas = document.querySelector("#myCanvas");
    var ctx = canvas.getContext("2d");

    // ctx.fillRect(10, 50, 50, 50);
    // ctx.strokeRect(0, 0, 10, 10);
    // ctx.clearRect(10, 50, 50, 50);

    // ctx.beginPath();
    // ctx.moveTo(50, 50);
    // ctx.lineTo(150, 150);
    // ctx.arc(100, 100, 50, 0, Math.PI * 2);
    // ctx.fill()

    // ctx.font = "30px Arial";
    // ctx.fillText("Hello", 10, 50);
    // ctx.strokeText("World", 20, 80)

    // var gradient = ctx.createLinearGradient(0, 0, 100, 100);
    // gradient.addColorStop(0, "red");
    // gradient.addColorStop(1, "blue");
    // ctx.fillStyle = gradient;
    // ctx.fillRect(10, 10, 100, 100)

    // ctx.shadowColor = "black";
    // ctx.shadowOffsetX = 5;
    // ctx.shadowOffsetY = 5;
    // ctx.shadowBlur = 10;
    // ctx.fillRect(10, 10, 100, 100);

    // ctx.translate(50, 50);
    // ctx.scale(2, 2);
    // ctx.rotate(Math.PI / 4);
    // ctx.fillRect(0, 0, 100, 100);

    // ctx.save();
    // ctx.fillStyle = "red";
    // ctx.fillRect(10, 10, 100, 100);
    // ctx.restore();
    // ctx.fillStyle = "blue";
    // ctx.fillRect(10, 10, 100, 100);

    // function animate() {
    //   requestAnimationFrame(animate);
    //   ctx.clearRect(0, 0, canvas.width, canvas.height);
    //   ctx.arc(100, 100, 50, 0, Math.PI * 2);
    //   ctx.fill();
    // }
    // animate();
    ctx.fillRect(10, 10, 10, 1);
  </script>
</body>

</html>